<%--
  Created by IntelliJ IDEA.
  User: 70481
  Date: 2019/9/12
  Time: 21:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员管理</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" type="text/css">
</head>
<body>
<%--显示信息的table--%>
<table id="myTable" lay-filter="myTable"></table>
<%--表单--%>

<form class="layui-form" action="" style="display: none;" id="myForm" lay-filter="myForm">
    <div class="layui-form-item">
        <input type="hidden" id="articelId" name="articelId" value="">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="articelName" lay-verify="title" lay-reqtext="标题不能为空？" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">发布时间</label>
        <div class="layui-input-block">
            <input type="text" id="test1" name="articelDate" lay-verify="required" lay-reqtext="时间必选不能为空？" placeholder="时间" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">大师</label>
        <div class="layui-input-block">
            <select name="guruId" lay-verify="required" id="select">
              <%--大师的下拉框--%>

            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">文章配图</label>
            <div class="layui-input-inline" style="width: 140px; height: 150px">
                <input type="file" name="file" autocomplete="off" class="layui-input" id="fileImg">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 200px; height: 160px">
                <img src="" id="myImg" style="width: 100%; height: 100%">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea name="articelContent" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>



<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>


<script type="text/javascript">
    layui.use(["table","form","layer"],function () {
        var table= layui.table;
        var form = layui.form;
        var layer = layui.layer;
        // 表格的初始化
        table.render({
            elem:"#myTable",
            url:"${pageContext.request.contextPath}/articel/selectArticelPage",
            page:"true",
            toolbar:"#tool",
            cols:[[
                {checkbox:'checkbox'},
                {title:"编号",field:"articelId",width:65},
                {title:"文章标题",field:"articelName"},
                {title:"配图",field:"articelImage",templet:"#image"},
                {title:"内容",field:"articelContent"},
                {title:"出自",field:"guru",templet:"#titleTpl"},
                {title:"发布时间",field:"articelDate"},
                {title:"操作",toolbar: '#os'}
            ]]
        })

        // 监听头事件

        table.on("toolbar(myTable)",function (obj) {
            if(obj.event==="add"){

                $("#articelId").val("")
                // alert(123)
                $("#myForm")[0].reset()
                // 查询所有的大师
                $.ajax({
                    url:"${pageContext.request.contextPath}/guru/selectAll",
                    async:false,
                    success:function(data){
                        $("#select").html("")
                        $.each(data,function (index,obj) {
                            // 元素拼接
                            $("#select").append(" <option value=\""+obj.guruId+"\">"+obj.guruNickname+"</option>")
                        })
                    }
                })

                layer.open({
                    type:1,
                    offset:"t",
                    anim:1,
                    area:"600px",
                    content:$("#myForm")
                })
            }else{
                var params  = $("#searchName").val();
                table.reload("myTable",{
                    where:{"name":params}
                })
            }
        })

        // 监听form提交
        form.on("submit(demo1)",function(data){
            // 以指定的表单创建formdate对象         myForm是form的id属性
            // formdate对象中已经包含了form表单的所有数据信息
            // 需要google浏览器67以上的版本
            var formdata=new FormData(document.getElementById("myForm"))
             console.log(data.field)
            if($("#articelId").val()===""){
                $.ajax({
                    url:"${pageContext.request.contextPath}/articel/insertArticel",
                    // 指定以post提交
                    type:"post",
                    // 同步提交
                    async:false,
                    // 关闭缓存
                    cache:false,
                    // 不对数据做特殊处理
                    processData:false,
                    // 不对类型做特殊处理
                    contentType:false,
                    // 传递的参数
                    data:formdata,
                    success:function (data) {
                        layer.msg(data.isInsert,{time:1250})
                        layer.closeAll("page"),
                        table.reload("myTable")
                    }
                })
            }else{
                // alert(23)
                $.ajax({
                    url:"${pageContext.request.contextPath}/articel/updateArticel",
                    type:"post",
                    async:false,
                    cache:false,
                    processData:false,
                    contentType:false,
                    data:formdata,
                    success:function (data) {
                        layer.msg(data.isUpdate,{time:1250});
                        layer.closeAll("page");
                        table.reload("myTable");
                    }
                })
            }

            return false;
        })


    })
// 修改
    function update(obj) {
        var form = layui.form;
        var layer = layui.layer;
        // alert(123)
        $("#myForm")[0].reset()
        $.ajax({
            url:"${pageContext.request.contextPath}/articel/selectById",
            data:{"id":obj},
            success:function (data) {
                console.log(data)
                $("#select").html("")
                $.each(data.gurus,function (index,obj) {
                    // 元素拼接

                    if(data.articel.guruId===obj.guruId){
                        // alert(123)
                        $("#select").append(" <option selected value=\""+obj.guruId+"\">"+obj.guruNickname+"</option>")
                    }else{
                        $("#select").append(" <option value=\""+obj.guruId+"\">"+obj.guruNickname+"</option>")
                    }
                })
                form.val("myForm",{
                    articelId:data.articel.articelId,
                    articelName:data.articel.articelName,
                    articelDate:data.articel.articelDate,
                    articelContent:data.articel.articelContent
                });
                layer.open({
                    type:1,
                    offset:"t",
                    anim:1,
                    area:"600px",
                    content:$("#myForm")
                })

            }
        })
    }

    function dele(obj) {
        var layer = layui.layer;
        var table = layui.table;

        layer.confirm("确定删除吗？",function (index) {
            $.ajax({
                url:"${pageContext.request.contextPath}/articel/deleteArticel",
                data:{"id":obj},
                success:function(data){
                    layer.msg(data.isDelete,{time:1250})
                    table.reload("myTable")
                }
            })
        })
    }


// 时间输入框
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' ,//指定元素
            format:"yyyy-MM-dd HH:mm:ss"
        });
    });


    //建立一個可存取到该file的url  用于文件上传的图片回显
    function getObjectURL(file) {
        var url = null ;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    //图片上传回显
    $("#fileImg").change(function () {
        var objurl = getObjectURL(this.files[0])
        if (objurl) {
            $("#myImg").attr("src", objurl)
        }
    })
</script>
<script type="text/html" id="titleTpl">
   {{d.guru.guruNickname}}
</script>
<script type="text/html" id="image">
    <img src="${pageContext.request.contextPath}/{{d.articelImage}}">
</script>
<script type="text/html" id="os">
    <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="update" id="update" onclick="update('{{d.articelId}}')">
        <i class="layui-icon layui-icon-util"></i>修改</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" lay-event="delete"  onclick="dele('{{d.articelId}}')">
        <i class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script type="text/html" id="tool">
    <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="add">
        <i class="layui-icon layui-icon-add-circle-fine"></i>上传</button>
    <input type="text" name="name" id="searchName" style="height: 30px">
    <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="search">
        <i class="layui-icon layui-icon-search"></i>搜索</button>
</script>

</html>
